/*
 * @Description: 
 * @Author: Cxy
 * @Date: 2023-05-15 08:49:57
 * @LastEditors: Cxy
 * @LastEditTime: 2024-04-28 10:49:05
 * @FilePath: \blogAdmin\play\src\style\base.scss
 */
@use './skin' as *;
@use '@/style/mixin';

/* 深色模式 */
@media (prefers-color-scheme: dark) {
  html {
    @include dark;
  }
}

html.light {
  @include light;
}

html.dark {
  @include dark;
}

body {
  color: var(--color-text);
  background: var(--color-bg);
  transition: background-color var(--el-transition-duration-fast);
  font-family: Inter, -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu,
    Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  font-size: mixin.pxToRem(14);
  /* Text-rendering 属性是一个非标准属性，主要用来告诉渲染引擎（rendering engine）渲染文字的时候如何来优化，浏览器根据这个属性来权衡速度、易读性、几何精度等方面。
  暂时只有Gecko（Firefox）and WebKit（Safari 或 Chrome）支持这个属性。 */
  text-rendering: optimizeLegibility;
  /* 绘制文本时易读性优先，会启用字距调整和连字 */
  /* 是webkit在自己的渲染引擎中增加的对字体的抗锯齿的调整，这个调整在iOS中表现明显，在Windows中表现不明显； */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* 属性用于指定如果指定font family的字体没有斜体或粗体时，是否由浏览器来合成字体的斜体或粗体样式。 */
  font-synthesis: none;
  overflow: hidden;
}